import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-chart-pie-with-legend',
  templateUrl: './chart-pie-with-legend.component.html',
  styleUrls: ['./chart-pie-with-legend.component.css']
})

export class ChartPieWithLegendComponent implements OnInit {

  constructor() { }

  @Input() chartTitle: string;
  @Input() chartData: any;
  // 暂时作为是否筛选的状态
  @Input() outPieName: string;
  // 设置饼图颜色，桉顺序输入
  @Input() colorArray: string[];
  @Output() changePieName: EventEmitter<string> = new EventEmitter<string>();
  @Output() outEventName: number;
  // 暂定方法 把筛选条件放入数组，放入前判断是否存在
  @Output() clickArray: string[] = [];

  public chartOption: object;

  ngOnInit(): void {

  this.chartOption = {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      height: '147px',
      // float: 'left'
      // spacing: 0,
      margin: [5,120,10,0],
      borderWidth: 1
    },
    // responsive: {
    //   rules: [{
    //     condition: {
    //       maxHeight: 180
    //     },
    //     chartOptions: {
    //       chart: {
    //         height: '300px'
    //       }
    //     }
    //   }]
    // },
    title: {
      // 传入标题
      text: this.chartTitle,
      // margin: 0,
      floating: true,
      style: {
        "fontSize": "12px",
        "fontfamily": '微软雅黑'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      x: 130,
      verticalAlign: 'middle',
      itemMarginTop: 8,
      itemStyle: {
        'fontSize': '12px'
      }
    },
    credits: {
      enabled: false
    },
    tooltip: {
      headerFormat: '{point.y}台<br>',
      pointFormat: '占比: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false
        },
        colors: this.colorArray,
        showInLegend: true
      }
    },
    series: [{
      events: {
        click: e => {
          // console.dir(e);
          this.outPieName = e.point.name;
          this.changePieName.emit(this.outPieName);
          console.dir(this.changePieName)
        }
      },
      type: 'pie',
      // 传入标题作为名称
      name: this.chartTitle,
      // 传入饼状图设置
      data: this.chartData
    }]
  }
 }
}
